<template>
  <el-dialog v-if="load" :close-on-click-modal="false" title="变更产品信息" v-model="visible" :class="log && changeData.length && 'full'" align-center
    width="1300px" @close="handleClose">
    <el-form :disabled="isLook || log">
      <template v-if="log">
        <div class="mb-3 font-bold">变更前数据</div>
      </template>
      <vxe-table ref="tableRef" :data="data" size="small">
        <vxe-column :min-width="100">
          <template #header>
            <div>sku</div>
          </template>
          <template #default="{ row }">
            {{ row.sku }}
          </template>
        </vxe-column>
        <vxe-column :min-width="120">
          <template #header>
            <div>* 需求数量</div>
          </template>
          <template #default="{ row }">
            <div class="flex flex-col gap-1 p-1">
              <el-input-number v-model="row.demand_num" controls-position="right" :min="0" :step="1" :precision="0"
                class="w-full" />
            </div>
          </template>
        </vxe-column>
        <vxe-column :min-width="180">
          <template #header>
            * 目的仓
          </template>
          <template #default="{ row }">
            <div class="flex flex-col gap-1 p-1">
              <el-select v-model="row.destination_warehouse" class="w-full" clearable filter placeholder="目的仓">
                <el-option v-for="(d, i) in options.destination_warehouse" :key="i" :label="d.label"
                  :value="d.value"></el-option>
              </el-select>
            </div>
          </template>
        </vxe-column>
        <vxe-column :min-width="160">
          <template #header>
            * 国家
            <div>* 需求日期</div>
          </template>
          <template #default="{ row }">
            <div class="flex flex-col gap-1 p-1">
              <el-select v-model="row.country" class="w-full" clearable filter placeholder="国家">
                <el-option v-for="(d, i) in options.country" :key="i" :label="d.label" :value="d.value"></el-option>
              </el-select>
              <el-date-picker v-model="row.demand_time" type="date" value-format="YYYY-MM-DD" class="w-full"
                placeholder="需求日期" />
            </div>
          </template>
        </vxe-column>
        <vxe-column :min-width="340">
          <template #header>
            <div>* 负责销售/* 需求数量/部门</div>
          </template>
          <template #default="{ row }">
            <div v-for="(da, idx) in row.detail" :key="idx" class="flex gap-1 p-1">
              <VCascader v-model="da.sale_id" placeholder="负责销售" filterable clearable class="w-full"
                @change="val => saleChange(da, val)" />
              <el-input-number v-model="da.demand_num" :controls="false" :min="0" :step="1" :precision="0"
                placeholder="需求数量" />
              <el-input :value="da.department_name" placeholder="部门" disabled class="w-full" />
              <template v-if="!log">
                <el-button link type="primary" @click="row.detail.splice(idx, 1)">移除</el-button>
              </template>
            </div>
            <template v-if="!log">
              <el-button link type="primary" @click="row.detail.push({ sale_id: '', department_id: '' })">添加</el-button>
            </template>
          </template>
        </vxe-column>
        <vxe-column :min-width="180">
          <template #header>
            运输方式
          </template>
          <template #default="{ row }">
            <el-select v-model="row.transport_type" class="w-full" clearable filter placeholder="运输方式">
              <el-option v-for="(d, i) in options.transport_type" :key="i" :label="d.label" :value="d.value"></el-option>
            </el-select>
          </template>
        </vxe-column>
        <vxe-column :min-width="180">
          <template #header>
            备料计划数据
          </template>
          <template #default="{ row }">
            <div v-for="(d, i) in row.plan" :key="i" class="flex flex-col gap-1 p-1">
              <div>{{ d.plan_no }}</div>
              <div>下单数量:{{ d.demand_num }}</div>
            </div>
            <template v-if="!log">
              <el-button v-if="!isLook && row.plan.length" link type="primary"
                @click="() => editNumRef.open(row.plan)">修改</el-button>
            </template>
          </template>
        </vxe-column>
        <template v-if="!log">
          <vxe-column title="变更原因" min-width="100">
            <template #default="{ row }">
              <el-input v-model="row.detail_remark" placeholder="备注" type="textarea" :minsize="{ minRows: 2 }"
                :maxlength="300" />
            </template>
          </vxe-column>
        </template>
      </vxe-table>
    </el-form>
    <el-form :disabled="isLook">
      <template v-if="log && changeData.length">
        <div class="mt-5 mb-3 font-bold">变更后数据</div>
        <div>
          <vxe-table ref="tableRef" :data="changeData" size="small">
            <vxe-column :min-width="100">
              <template #header>
                <div>sku</div>
              </template>
              <template #default="{ row }">
                {{ row.sku }}
              </template>
            </vxe-column>
            <vxe-column :min-width="140">
              <template #header>
                ASIN
              </template>
              <template #default="{ row }">
                <div class="flex flex-col gap-1 p-1">
                  <el-input v-model="row.asin" placeholder="ASIN" />
                </div>
              </template>
            </vxe-column>
            <vxe-column :min-width="120">
              <template #header>
                <div>* 需求数量</div>
              </template>
              <template #default="{ row }">
                <div class="flex flex-col gap-1 p-1">
                  <el-input-number v-model="row.demand_num" controls-position="right" :min="0" :step="1" :precision="0"
                    class="w-full" />
                </div>
              </template>
            </vxe-column>
            <vxe-column :min-width="180">
              <template #header>
                * 目的仓<br>平台
              </template>
              <template #default="{ row }">
                <div class="flex flex-col gap-1 p-1">
                  <el-select v-model="row.destination_warehouse" class="w-full" clearable filter disabled
                    placeholder="目的仓">
                    <el-option v-for="(d, i) in options.destination_warehouse" :key="i" :label="d.label"
                      :value="d.value"></el-option>
                  </el-select>
                  <el-select v-model="row.platform" class="w-full" clearable filter placeholder="平台">
                    <el-option v-for="(d, i) in platformsOptions" :key="i" :label="d.label" :value="d.value"></el-option>
                  </el-select>
                </div>
              </template>
            </vxe-column>
            <vxe-column :min-width="160">
              <template #header>
                * 国家
                <div>* 需求日期</div>
              </template>
              <template #default="{ row }">
                <div class="flex flex-col gap-1 p-1">
                  <el-select v-model="row.country" class="w-full" clearable filter disabled placeholder="国家">
                    <el-option v-for="(d, i) in options.country" :key="i" :label="d.label" :value="d.value"></el-option>
                  </el-select>
                  <el-date-picker v-model="row.demand_time" type="date" value-format="YYYY-MM-DD" class="w-full"
                    placeholder="需求日期" />
                </div>
              </template>
            </vxe-column>
            <vxe-column :min-width="340">
              <template #header>
                <div>* 负责销售/* 需求数量/部门</div>
              </template>
              <template #default="{ row }">
                <div v-for="(da, idx) in row.detail" :key="idx" class="flex gap-1 p-1">
                  <VCascader v-model="da.sale_id" placeholder="负责销售" filterable clearable class="w-full"
                    @change="val => saleChange(da, val)" />
                  <el-input-number v-model="da.demand_num" :controls="false" :min="0" :step="1" :precision="0"
                    placeholder="需求数量" />
                  <el-input :value="da.department_name" placeholder="部门" disabled class="w-full" />
                  <template v-if="!log">
                    <el-button link type="primary" @click="row.detail.splice(idx, 1)">移除</el-button>
                  </template>
                </div>
                <template v-if="!log">
                  <el-button link type="primary"
                    @click="row.detail.push({ sale_id: '', department_id: '' })">添加</el-button>
                </template>
              </template>
            </vxe-column>
            <vxe-column :min-width="180">
              <template #header>
                运输方式
              </template>
              <template #default="{ row }">
                <el-select v-model="row.transport_type" class="w-full" clearable filter placeholder="运输方式">
                  <el-option v-for="(d, i) in options.transport_type" :key="i" :label="d.label"
                    :value="d.value"></el-option>
                </el-select>
              </template>
            </vxe-column>
            <vxe-column :min-width="180">
              <template #header>
                备料计划数据
              </template>
              <template #default="{ row }">
                <div v-for="(d, i) in row.plan" :key="i" class="flex flex-col gap-1 p-1">
                  <div>{{ d.plan_no }}</div>
                  <div>下单数量:{{ d.demand_num }}</div>
                </div>
                <el-button v-if="!isLook && row.plan.length" link type="primary"
                  @click="() => editNumRef.open(row.plan)">修改</el-button>
              </template>
            </vxe-column>
            <vxe-column title="变更原因" min-width="100">
              <template #default="{ row }">
                <el-input v-model="row.detail_remark" placeholder="备注" type="textarea" :minsize="{ minRows: 2 }"
                  :maxlength="300" />
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </template>
    </el-form>
    <EditNum ref="editNumRef" />
    <template v-if="!isLook && !log" #footer>
      <el-button type="primary" :loading="loadings['submit' + 2]" @click="submit(2)">保 存</el-button>
      <el-button type="primary" :loading="loadings['submit' + 1]" @click="submit(1)">提 交</el-button>
    </template>
    <template v-if="!isLook && (log && changeData.length)" #footer>
      <el-button type="primary" :loading="loadings['changeSubmit' + 2]" @click="changeSubmit(2)">保 存</el-button>
      <el-button type="primary" :loading="loadings['changeSubmit' + 1]" @click="changeSubmit(1)">提 交</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import XEUtils from 'xe-utils'
import EditNum from './EditNum'
import api from './api'
import { platforms } from '@/api/public'
import { ElMessage } from 'element-plus';
import { getDepartment } from '@/api/public'

const props = defineProps({
  options: { type: Object, default: () => ({}) },
  log: Boolean,
})

const load = ref(false)
const visible = ref(false)
const isLook = ref(false)
const loadings = reactive({})
const data = ref([])
const changeData = ref([])

const editNumRef = ref()

const platformsOptions = ref([])
const emit = defineEmits(['close'])
platforms().then(res => {
  platformsOptions.value = res
})

const saleChange = (da, { value }) => {
  getDepartment({ select_user_id: value }).then(res => {
    da.department_id = res.data.department_id
    da.department_name = res.data.department_name
  })
}

// 打开弹窗
const open = async (params, change) => {
  if (!load.value) {
    load.value = true
    await 1
  }
  const res = await api.detail(params)
  if (props.log && change) {
    isLook.value = change.look
    if (change.changeData?.length) {
      changeData.value = [change.changeData]
    }
  }
  data.value = [res.data]
  visible.value = true
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}

// 跟踪单提交
const submit = (is_submit) => {
  const submitData = {
    sku: data.value,
    is_submit
  }
  loadings['submit' + is_submit] = true
  api.change(submitData).then(res => {
    ElMessage.success('提交成功')
    close()
  }).finally(() => {
    loadings['submit' + is_submit] = false
  })
}
// 变更单提交
const changeSubmit = (is_submit) => {
  const submitData = {
    pdc_id: changeData.value[0].pdc_id,
    sku: changeData.value[0],
    is_submit
  }
  loadings['changeSubmit' + is_submit] = true
  api.edit(submitData).then(res => {
    ElMessage.success('提交成功')
    close()
  }).finally(() => {
    loadings['changeSubmit' + is_submit] = false
  })
}

defineExpose({ open, close })
</script>